{extend name='public/layer_base' /}
{block name='content'}
<style>
    .layui-form-label {
        width: 180px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form class="layui-form" method="post">

                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">上级菜单</label>
                        <div class="layui-input-inline">
                            <div id="menu_parent"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="name" name="name" value="{$data.name|default=''}"
                                class="layui-input" placeholder="请输入名称" lay-verify="required" required>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="url" class="layui-form-label">url</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="url" name="url" value="{$data.url|default=''}" class="layui-input"
                                placeholder="请输入菜单url" lay-verify="required" required>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="url" class="layui-form-label">图标</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="icon" name="icon" value="{$data.icon|default=''}"
                                class="layui-input" lay-filter="icon">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="url" class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="number" id="sort_id" name="sort_id" value="{$data.sort_id|default='100'}"
                                class="layui-input" placeholder="请输入排序">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label for="nickname" class="layui-form-label">
                            是否显示</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" lay-skin="switch" lay-filter="is_show" value="1" {if isset($data) &&
                                $data.is_show==1} checked {/if}>
                            <input type="hidden" name="is_show" value="{$data.is_show|default='0'}">
                        </div>
                        <script>
                            layui.use('form', function () {
                                var form = layui.form;
                                form.on('switch(is_show)', function (data) {
                                    $('input[name=is_show]').val(data.elem.checked ? '1' : '0');
                                })
                            })
                        </script>
                    </div>

                    <div class="layui-form-item">
                        <label for="url" class="layui-form-label">日志请求方式</label>
                        <div class="layui-input-inline">
                            <select name="log_method" lay-verify="" lay-search>
                                {foreach name='log_method' item='item'}
                                <option value="{$item}" {if isset($data) && $data.log_method==$item}selected{/if}>
                                    {$item}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    {if !isset($data)}

                    <div class="layui-form-item">
                        <label for="nickname" class="layui-form-label"> 是否自动生成增删改菜单</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" lay-skin="switch" lay-filter="is_more" value="1">
                            <input type="hidden" name="is_more" value="{$data.is_more|default='0'}">
                        </div>
                        <script>
                            layui.use('form', function () {
                                var form = layui.form;
                                form.on('switch(is_more)', function (data) {
                                    $('input[name=is_more]').val(data.elem.checked ? '1' : '0');
                                })
                            })
                        </script>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">增删改操作名称</label>
                        <div class="layui-input-inline">
                            <input maxlength="50" id="more_name" name="more_name" value="{$data.more_name|default=''}"
                                class="layui-input" placeholder="请输入增删改操作名称">
                        </div>
                    </div>
                    {/if}

                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                            type="button">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var demo3 = xmSelect.render({
        el: '#menu_parent',
        radio: true,
        name: 'parent_id',
        clickClose: true,
        autoRow: true,
        filterable: true,
        model: {
            label: {
                type: 'text',
                text: {
                    //左边拼接的字符
                    left: '',
                    //右边拼接的字符
                    right: '',
                    //中间的分隔符
                    separator: ', ',
                },
            }
        },
        tree: {
            show: true,
            showFolderIcon: true,
            showLine: true,
            indent: 20,
            strict: false,
            expandedKeys: [-3],
        },
        filterable: true,
        height: 'auto',
        data: function () {
            return JSON.parse('{$select|raw}')
        }
    });


    layui.use(['iconPickerFa'], function () {
        var iconPickerFa = layui.iconPickerFa,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#icon',
            // 数据类型：fontClass/awesome，推荐使用fontClass
            url: "__ADMIN_PLUGINS__/font-awesome/less/variables.less",
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
    });

</script>
{/block}